<template>
  <div class="login">
    <div class="login-center">
      <div class="login-add">
        <div class="login-title"></div>
        <img class="login-logo" src="../assets/img/login_logo.png" alt="">
        <h2 class="login-mes">管理系统-安晓东</h2>
        <el-form  
          :model="userInfo"
          :rules="userRule"
          ref="ruleForm" 
          class="login-form">
          <el-form-item prop="username">
            <el-input 
              class="login-ipt" 
              v-model="userInfo.username"
            >
              <i slot="prefix" class="el-icon-user-solid"></i>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input 
              class="login-ipt" 
              v-model="userInfo.password"
              type="password"
              show-password
            >
              <i slot="prefix" class="el-icon-lock"></i>
            </el-input>
          </el-form-item>
           <el-form-item>
            <el-button class="login-submit" type="primary" @click="submitForm">登录</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import {login} from "../api"

export default {
  name:"Login",
  data() {
    return {
      userInfo:{
        username:"",
        password:""
      },
      userRule:{
        username:[{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password:[{ required: true, message: '请输入密码', trigger: 'blur' }]
      }
    }
  },
  methods:{
    submitForm(){
       this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            //向后台验证用户的账号
            login(this.userInfo).then(res=>{
              console.log(res.data)
              if(res.data.code == 404){
                this.$message.error("您的用户名不正确")
              }else if(res.data.code == 500){
                this.$message.error("您的密码与用户名不匹配")
              }else if(res.data.code == 200){
                this.$message.success("登录成功")
                var s = res.data.data.tokenHead + res.data.data.token
                window.sessionStorage.setItem('token',s)
                this.$router.push('/layout')
              }
            })
          } else {
            this.$message.error('请输入完整的用户名或密码')
            return false;
          }
        });
    },
    resetForm(){
      this.userInfo.username = ""
      this.userInfo.password = ""
    }
  }
}
</script>

<style scoped lang="less">
  .login{
    width: 100vw;
    height: 100vh;
    position: relative;
    .login-center{
      width: 100%;
      height: 300px;
      position: absolute;
      top: 50%;
      margin-top: -150px;
      background-color: #409eff;
      background-image: url("../assets/img/login_center_bg.png");
      background-repeat: round;
      background-size: cover;
      .login-add{
        width: 400px;
        height: 460px;
        background: #fff;
        position: absolute;
        left: 50%;
        margin-left: -200px;
        margin-top: -80px;
        border-radius: 4px;
        box-shadow: 0px 5px 5px #eee;
        overflow: hidden;
        .login-title{
          width: 110%;
          height: 10px;
          background: #409eff;
        }
        .login-logo{
          margin: 20px 0px 0px 130px;
        }
        .login-mes{
          text-align: center;
          color: #409eff;
        }
        .login-form{ 
          margin: 15px 50px 0px;
          .login-ipt{  
            width: 300px;
            i{
              color: #409eff;
            }
          }
          .login-submit{
            margin-left: 70px;
          }
        }
      }
    }
  }
</style>